<template>
  <div class="app-container home">

    <div class="container">


      <el-row>
        <span style="margin-bottom: 20px">模板库</span>
      </el-row>
      <el-row>

        <el-col :span="4" v-for="(item,index) in systemTemplates" style="text-align: center" :key="index">
          <div class="template_system" @click="preview(item)">
            <div style="color: #f85452;margin-bottom: 10px">{{item.templateName}}</div>
            <div
              style="font-size: 12px;color: #666;background-color: white;padding-left: 5px;padding-top: 2px;padding-bottom: 2px;margin-bottom: 10px">
              {{formatter(item.updateTime)}}
            </div>
            <img v-if="item.isDefault==1" src="@/assets/images/default-template-tag.svg" class="ng-star-inserted">
          </div>
          <el-button size="mini" type="primary" @click="setDefault(item)" v-if="item.isDefault==0">设为默认</el-button>
        </el-col>

      </el-row>
      <el-divider></el-divider>
      <el-row>
        <span style="margin-bottom: 20px">自定义模板</span>
      </el-row>
      <el-row>
        <div v-for="item in customTemplates">
          <el-col :span="4">
            <div class="template_div" @click="preview(item)">
              <div style="color: white;margin-bottom: 10px">{{item.templateName}}</div>
              <div
                style="font-size: 12px;color: #f85452;background-color: white;padding-left: 5px;padding-right: 20px;padding-top: 2px;padding-bottom: 2px">
                {{formatter(item.updateTime)}}
              </div>
            </div>
            <el-button size="mini" type="plain" @click="setDefault(item)">设为默认</el-button>
            <el-button size="mini" type="plain" @click="handleDelete(item)">删除</el-button>
          </el-col>
        </div>

        <el-col :span="6">
          <div class="add_div" @click="handleAdd">
            <div>
              <i class="el-icon-plus"></i>
            </div>
            <span>新增</span>
          </div>
        </el-col>
      </el-row>
    </div>


    <!-- 预览模板 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="50%">


      <div style="padding: 50px">

        <div
          v-bind:style="{textAlign: 'center',fontSize: +template.fontSizeTitle+'px',color: '#'+template.fontTitleColor}">
          {{template.reportName}}
        </div>

        <div
          v-bind:style="{marginTop: '20px',fontFamily:template.fontFamily,fontSize:template.fontSizeContent+'px',textAlign: 'center'}">
          <span>  {{template.publishingDepartment}}</span> <span style="margin-left: 30px;">  {{ formatter(template.updateTime)}} </span>
        </div>
        <div><img style="margin-top: 10px;width: 100%" src="../../../assets/images/head_image.png"/></div>


        <div v-if="template.elements!=undefined">
          <div v-for="(item,index) in template.elements" style="margin-top: 20px">
            <div style="font-size: 16px;font-weight: bold;margin-bottom: 20px">
              <span v-if="item.showName!=undefined">{{toChinesNum(index+1)}}、{{item.showName}}</span>
              <span v-else>{{toChinesNum(index+1)}}、{{item.name}}</span>
            </div>

            <span v-if="item.type==1"> {{item.showText}}</span>
            <span v-else-if="item.type==3"> {{item.text}}</span>
            <opinion-guide-template v-else-if="item.name=='舆情导读'"></opinion-guide-template>
            <opinion-main v-else-if="item.name=='主要舆情'"></opinion-main>
            <line-chart-demo v-else-if="item.name=='情感分析'"></line-chart-demo>
            <word-cloud-demo v-else-if="item.name=='高频词云'"></word-cloud-demo>
            <pie-chart-demo v-else-if="item.name=='信息情感分布'"></pie-chart-demo>
            <pie-chart-demo-rose v-else-if="item.name=='来源类型分析'"></pie-chart-demo-rose>
            <bar-chart-demo v-else-if="item.name=='媒体来源明细'"></bar-chart-demo>
            <line-chart-demo-base v-else-if="item.name=='信息走势图'"></line-chart-demo-base>
            <starting-media v-else-if="item.name=='首发媒体溯源'"></starting-media>
            <line-chart-demo-custom v-else-if="item.name=='媒体传播分析'"></line-chart-demo-custom>
            <venation-of-the-event v-else-if="item.name=='事件脉络'"></venation-of-the-event>
            <line-chart-demo-media-type v-else-if="item.name=='信息载体趋势'"></line-chart-demo-media-type>
            <bar-chart-demo-media-type-emotion v-else-if="item.name=='载体情感分析'"></bar-chart-demo-media-type-emotion>
            <HotArticle v-else-if="item.name=='热门文章'"></HotArticle>
            <el-image v-else :src="item.image" style="height:300px;width:100%" fit="contain"/>


          </div>
        </div>

      </div>


    </el-dialog>
  </div>
</template>

<script>
  import {
    listReport,
    getReport,
    delReport,
    updateReport,
    setDefaultTemplate
  } from "@/api/system/template";
  import {listElement} from "@/api/system/element";
  import OpinionGuideTemplate from '@/components/Custom/OpinionGuideTemplate'
  import OpinionMain from '@/components/Custom/OpinionMain'
  import LineChartDemo from '@/components/Echarts/LineChartDemo'
  import WordCloudDemo from '@/components/Echarts/WordCloudDemo'
  import PieChartDemo from '@/components/Echarts/PieChartDemo'
  import PieChartDemoRose from '@/components/Echarts/PieChartDemoRose'
  import BarChartDemo from '@/components/Echarts/BarChartDemo'
  import LineChartDemoBase from '@/components/Echarts/LineChartDemoBase'
  import LineChartDemoMediaType from '@/components/Echarts/LineChartDemoMediaType'
  import StartingMedia from '@/components/Custom/StartingMedia'
  import BarChartDemoMediaTypeEmotion from '@/components/Echarts/BarChartDemoMediaTypeEmotion'
  import LineChartDemoCustom from '@/components/Echarts/LineChartDemoCustom'
  import VenationOfTheEvent from '@/components/Custom/VenationOfTheEvent'
  import HotArticle from '@/components/Custom/HotArticle'


  export default {
    name: "Template",
    components: {
      PieChartDemo,
      OpinionGuideTemplate,
      LineChartDemo,
      WordCloudDemo,
      PieChartDemoRose,
      BarChartDemo,
      LineChartDemoBase,
      OpinionMain,
      StartingMedia,
      LineChartDemoCustom,
      VenationOfTheEvent,
      LineChartDemoMediaType,
      BarChartDemoMediaTypeEmotion,
      HotArticle
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 简报模板表格数据
        reportList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          subjectName: null,
          reportName: null,
          keyword: null,
          classified: null,
          publishTime: null,
          classificationTime: null,

          userId: null,
          companyId: null,
          isDefault: null,
          isSystem: null,
          sequence: null,
          status: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          userId: [
            {required: true, message: "用户编号不能为空", trigger: "blur"}
          ],
          companyId: [
            {required: true, message: "公司编号不能为空", trigger: "blur"}
          ],
        },
        defaultOptions: [{dictValue: 1, dictLabel: "是"}, {dictValue: 0, dictLabel: "否"}],
        elementList: [],

        systemTemplates: [],
        customTemplates: [],
        template: {}
      };
    },
    created() {
      this.getList();
      this.getElements();
    },
    methods: {

      toChinesNum(num) {
        let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
        let unit = ["", "十", "百", "千", "万"];
        num = parseInt(num);
        let getWan = (temp) => {
          let strArr = temp.toString().split("").reverse();
          let newNum = "";
          for (var i = 0; i < strArr.length; i++) {
            newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
          }
          return newNum;
        }
        let overWan = Math.floor(num / 10000);
        let noWan = num % 10000;
        if (noWan.toString().length < 4) {
          noWan = "0" + noWan;
        }
        return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
      },
      formatter(time) {
        const values = (time || '').split(' ');
        console.log(JSON.stringify(values))
        if (values.length >= 2) {
          const date = values[0];
          const time = values[1];
          return date
        }
        /* istanbul ignore next */
        return null;
      },
      preview(item) {
        this.open = true;
        getReport(item.briefReportId).then(response => {
          this.template = response.data
        });


      },
      setDefault(row) {
        const briefReportId = row.briefReportId;
        this.$confirm('是否确认将简报模板编号为"' + briefReportId + '"的模板设置为默认模板?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return setDefaultTemplate(briefReportId);
        }).then(() => {
          this.getList();
          this.msgSuccess("设置默认模板成功");
        })
      },

      getElements() {
        listElement().then(response => {
          this.elementList = response.rows;
        });
      },
      /** 查询简报模板列表 */
      getList() {
        this.loading = true;
        listReport(this.queryParams).then(response => {

          this.systemTemplates = [];
          this.customTemplates = [];
          this.reportList = response.rows;
          if (this.reportList.length > 0) {
            this.reportList.forEach(item => {
              if (item.isSystem == 1) {
                this.systemTemplates.push(item)
              } else {
                this.customTemplates.push(item)
              }
            })
          }
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.form = {
          briefReportId: null,
          createTime: null,
          subjectName: null,
          reportName: null,
          keyword: null,
          classified: null,
          publishTime: null,
          classificationTime: null,

          userId: null,
          companyId: null,
          isDefault: null,
          isSystem: null,
          sequence: null,
          status: 0,
          updateTime: null
        };
        this.resetForm("form");
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.$router.push({path: "/template/create"});
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const briefReportId = row.briefReportId || this.ids
        getReport(briefReportId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改简报模板";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.briefReportId != null) {
              updateReport(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const briefReportIds = row.briefReportId || this.ids;
        this.$confirm('是否确认删除简报模板编号为"' + briefReportIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delReport(briefReportIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },

    }
  };
</script>


<style lang="scss" scoped>

  .home {
    background-color: white;
    margin-top: 10px;
    margin-right: 10px;
    min-height: calc(100vh - 100px);
  }


  .template_system {
    margin: 10px;
    width: 160px;
    height: 220px;
    text-align: center;
    padding-top: 40px;
    background-image: url('https://cdn-c-files.yqt365.com/staticweb/red-cover.c8930ebca84976d7295e.svg');
    /* 设置背景大小、位置等 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #f85452;
  }


  .template_div {
    margin-top: 20px;
    width: 160px;
    height: 220px;
    text-align: center;
    padding-top: 40px;
    background-image: url("https://cdn-c-files.yqt365.com/staticweb/blue-cover.c1d3d928b0bc47c44a05.svg");
    /* 设置背景大小、位置等 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid dodgerblue;
  }

  .add_div {
    margin-top: 20px;
    color: #1c84c6;
    border: 1px solid dodgerblue;
    width: 160px;
    height: 220px;
    padding: 90px 0;
    text-align: center;
  }


</style>



